import style from "./index.module.scss";
import Card from "../../../components/Card";
// import type { FC } from "react";
import { useState, useEffect } from "react";
import { produce } from "immer";
// import useMouse from "../../../hooks/useMouse";
import useTitle from "../../../hooks/useTitle";
import { Button, Spin } from "antd";
import { Typography, Pagination } from "antd";
import { api } from "@/api";
import { useHandRouterChange } from "@/hooks/useHandRouterChange";
import SearchInput from "@/components/SearchInput";
import { useSearchParams } from "react-router-dom";

const { Title } = Typography;

const Star = () => {
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 20,
  });
  const [questionList, setQuesionList] = useState([]);
  const [total, setTotal] = useState(0);
  const { data, loading } = useHandRouterChange(
    api.questionnaire.getQuestionnaireStar,
    "keyWord",
    { isStar: true },
  );
  useEffect(() => {
    console.log("获取星标问卷", data);
    if (data) {
      setQuesionList(data);
    }
  }, [data]);

  useEffect(() => {
    useTitle("我的问卷");
  }, []);
  //添加问卷
  const add = () => {
    const sel = Math.random().toString().slice(-3);
    setQuesionList(
      produce((draft) => {
        draft.push({
          id: "q" + sel,
          title: "问卷" + sel,
          isPublished: false,
          isStar: false,
        });
      }),
    );
  };
  const getList = async () => {
    const res = await api.questionnaire.getQuestionnaireStar();
    console.log("获取问卷列表", res);
    setQuesionList(res.data);
  };
  //是否标星
  const handStar = async (id: string, starState: boolean) => {
    const res = await api.questionnaire.putQuestionnaire({
      id,
      isStar: starState,
    });
    console.log("修改标星响应", res);
    getList();
  };
  const delQuestionList = (id: string) => {
    console.log("删除问卷", id);
    // setQuesionList(
    //   questionList.filter((item) => {
    //     if (id == item.id) return false;
    //     else return true;
    //   }),
    // );
    const index = questionList.findIndex((item) => item.id == id);
    setQuesionList(
      produce((item) => {
        item.splice(index, 1);
      }),
    );
  };
  //发布问卷
  const edit = (id: string) => {
    console.log(id);
    setQuesionList(
      questionList.map((item) => {
        if (item.id == id) {
          return { ...item, isPublished: true };
        } else return item;
      }),
    );
  };

  const MyPagination = () => {
    const [current, setCurrent] = useState(1);
    const [searchParams, setSearchParams] = useSearchParams();
    const onChange = (page: any, pageSize: any) => {
      console.log("page: ", page, "pageSize: ", pageSize);

      setPagination({
        current: page,
        pageSize: pageSize,
      });
      setSearchParams({
        current: page,
        pageSize: pageSize,
      });
    };
    return (
      <Pagination
        align="end"
        total={total}
        showTotal={(total) => `共计 ${total} `}
        pageSize={pagination.pageSize}
        current={pagination.current}
        onChange={onChange}
      />
    );
  };

  return (
    <div className={style.container}>
      <Title level={3}>星标问卷</Title>
      <h1></h1>
      <SearchInput></SearchInput>
      <Spin spinning={loading}>
        {questionList.map((item) => {
          return (
            <Card
              key={item.id}
              id={item?.id}
              state={item?.published}
              isPublished={item?.published}
              title={item?.title}
              isStar={item?.isStar}
              delQuestionList={delQuestionList}
              editQuestionList={edit}
              handStar={handStar}
            ></Card>
          );
        })}
      </Spin>
      <Button onClick={add} danger>
        新增问卷
      </Button>
      <MyPagination></MyPagination>
    </div>
  );
};
export default Star;
